<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 400px;
        border: 1px solid #ddd;
        text-align: center;
        padding-bottom: 10px;
      }
      .container p {
        font-size: 1.3em;
        font-weight: bold;
        text-align: center;
      }
      .container img {
        width: 340px;
        height: 340px;
        border-radius: 50%;
      }
      .container input {
        width: 340px;
        display: block;
        margin: 10px auto;
      }
      .container .time {
        width: 340px;
        height: 30px;
        margin: 0px auto;
      }
      .container .time .left {
        float: left;
      }
      .container .time .right {
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>let it go</p>
      <img src="assets/logo.jpg" alt="" />
      <input id="range" type="range" min="0" value="0" max="100" />
      <div class="time">
        <span class="left">00:00</span>
        <span class="right">03:44</span>
      </div>

      <button id="btn_play">播放/暂停</button>
      <button id="btn_vp">音量+</button>
      <button id="btn_vm">音量-</button>
      <button id="btn_05">0.5倍速</button>
      <button id="btn_1">1倍速</button>
      <button id="btn_2">2倍速</button>
    </div>
    <script src="./assets/moment.js"></script>
    <script>
      let player = new Audio();
      player.src = "./assets/let_it_go.mp3";
      let range = document.getElementById('range')
      range.addEventListener("change",()=>{
        console.log(range.volume);
        player.currentTime = range.value
        if (player.paused) {
          // 如果暂停状态就播放
          player.play();
        }
      })
      // 设置总时长
      player.addEventListener("loadedmetadata", () => {
        let dt = player.duration;
        let dtstr = moment.unix(dt).format("mm:ss");
        let right = document.getElementsByClassName("right")[0];
        right.innerText = dtstr;
      });
      // 监听播放器的timeupdate,一旦播放进度刚更新就会触发该事件
      player.addEventListener("timeupdate", () => {
        let ct = player.currentTime;
        // 更新时间字符串 ctspan dtspan
        let ctstr = moment.unix(ct).format("mm:ss");
        console.log(`currentTime:${ctstr}`);
        // 类名找元素找到的是数组
        let left = document.getElementsByClassName("left")[0];
        left.innerText = ctstr;
        // 更新当前进度条 range input
        let range = document.getElementById("range");
        range.value = ct;
        console.log(range.value);
      });

      // 控制播放速度 0.5 1 2
      document.getElementById("btn_05").onclick = () => {
        player.playbackRate = 0.5;
      };
      document.getElementById("btn_1").onclick = () => {
        player.playbackRate = 1;
      };
      document.getElementById("btn_2").onclick = () => {
        player.playbackRate = 2;
      };
      // 音量的+ -
      let btn_vp = document.getElementById("btn_vp");
      let btn_vm = document.getElementById("btn_vm");
      btn_vp.addEventListener("click", () => {
        player.volume = Math.min(player.volume + 0.1, 1);
        console.log(player.volume);
      });
      btn_vm.addEventListener("click", () => {
        player.volume = Math.max(player.volume - 0.1, 1);
        console.log(player.volume);
      });
      // 播放与暂停
      let btn_play = document.getElementById("btn_play");
      btn_play.addEventListener("click", () => {
        if (player.paused) {
          // 如果暂停状态就播放
          player.play();
        } else {
          // 否则就暂停
          player.pause();
        }
      });
    </script>
  </body>
</html>
